<template>
    <!-- 版本信息弹窗 -->
    <el-dialog v-model="showVersionDialog" title="版本更新通知" width="600px" :close-on-click-modal="false" align-center
        :show-close="false">
        <div>当前版本：v{{ currentVersion }}</div>
        <div>更新内容：</div>
        <div v-html="markedContent"></div>
        <template #footer>
            <el-button type="primary" @click="handleClose">我知道了</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { marked } from 'marked';
import { getLatestReleaseLog } from '@/api/system/releaselog.js';

// 状态管理
const showVersionDialog = ref(false);
const markedContent = ref('');
const currentVersion = ref('');

// 缓存键名
const CACHE_KEY = 'LAST_VIEWED_VERSION';

onMounted(async () => {
    try {
        // 获取版本日志列表
        const versionLog = await getLatestReleaseLog();
        if (versionLog) {
            markedContent.value = marked(versionLog.summary || '');
            currentVersion.value = versionLog.versionCode;
        }
        // 检查缓存
        const cachedVersion = localStorage.getItem(CACHE_KEY);
        if (!cachedVersion || cachedVersion !== currentVersion.value) {
            // 无缓存或版本更新，显示弹窗
            showVersionDialog.value = true;
            // 更新缓存
            localStorage.setItem(CACHE_KEY, currentVersion.value);
        }
    } catch (error) {
        console.error('获取版本信息失败:', error);
    }
});

// 关闭弹窗
const handleClose = () => {
    showVersionDialog.value = false;
};
</script>

<style scoped>
.version-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    line-height: 1.6;
}
</style>